<template>
  <div style="display: flex;flex-direction: row; height: 100%;">
      <div style="min-width: 225px;">
        <div class="largeTypeBox">
            <div v-for="item in largeTypeLeftOption"
                  @click="selectType(item)"
                  :class="largeType==item.value? 'largeTypeSelect' : 'largeTypeNormal'">
             {{item.label}}({{item.num}})</div>
        </div>
      </div>
      <div style="width: calc(100% - 225px)">
        <div class="table-all">
            <!-- 搜索区 -->
            <div class="app-container search-box">
              <SearchForm
                :form="searchData.form"
                :options="searchData.options"
                @searchUpdate="search"
                @resetSearchData="resetSearchData"
              ></SearchForm>
            </div>
            <!-- 按钮区 -->
            <div class="app-container table-box">
              <div class="table-main">
                <!-- 表格 -->
                <v-table
                  title="预案数据"
                  v-if="tableMainHeight>0"
                  :table-columns="tableColumns"
                  :table-data="tableData"
                  :loading="loading"
                  :is-index="true"
                  ref="table"
                  :maxHeight="tableMainHeight">
                  <template #topButtonList>
                    <ButtonForm :buttonList="buttonList" @clickButton="clickButton"></ButtonForm>
                  </template>
                  <template #largeType="scope">
                    {{getDictValue(scope.row.largeType, largeTypeOptions)}}
                  </template>
                  <template #secretLevel="scope">
                    {{getDictValue(scope.row.secretLevel, secretLevelOptions)}}
                  </template>
                  <template #examineStatus="scope">
                    {{scope.row.examineStatus ? getDictValue(scope.row.examineStatus, examineStatusOptions) : "未审核"}}
                  </template>
                  <template #updateTime="scope">
                    {{scope.row.examineStatus ?  scope.row.updateTime: ""}}
                  </template>
                  <template #suitTypeSmall="scope">
                     {{getSuitTypeSmallFormat(scope.row.suitTypeSmall)}}
                  </template>
                  <template #operation="scope">
                    <a v-if="scope.row.examineStatus!=1"
                      v-hasPermission="['riskPlan:add']" class="table-btn-edit table-operation"
                       @click="handleEdit(scope.row)">{{isExamine ? $t('table.approve') : $t('table.edit')}}</a>
                    <a v-hasPermission="['riskPlan:add']" class="table-btn-view table-operation"
                       @click="handleDetail(scope.row)">{{$t('table.view')}}</a>
                    <a v-hasPermission="['riskPlan:delete']" class="table-btn-delete table-operation"
                       @click="singleDelete(scope.row)">{{$t('table.delete')}}</a>
                  </template>
                </v-table>
              </div>
              <div class="table-page">
                <!-- 页码 -->
                <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                            @pagination="search"/>
              </div>
            </div>
            <!--</div>-->
            <!-- 详情 -->
            <detailDialog :dialog-visible="detailDialogShow"
                          @success="editSuccess"
                          @close="editClose"
                          :openType="detailOpenType"
                          :riskPlanSuitTypeOptionsFormat = "riskPlanSuitTypeOptionsFormat"
                          :id="detailId"
                          :title="detailTitle"
                          :largeType="largeType"
            ></detailDialog>
        </div>
      </div>
  </div>
</template>

<script>
    import { riskPlanPage,
            riskPlanExport,
            riskPlanDelete,
            getLargeTypeNumList} from '@/api/risk/plan'
    import SearchForm from '@/components/searchForm/index'
    import ButtonForm from '@/components/ButtonForm/index'
    import VTable from '@/components/VTable/index'
    import Pagination from '@/components/Pagination/index'
    import detailDialog from './detail.vue'
    export default {
        components:{
            VTable,Pagination,detailDialog,SearchForm,ButtonForm
        },
        data(){
            return{
                tableColumns:[
                            {
                                prop: 'name',
                                label: '预案名称',
                                minWidth: '150',
                                slotname: 'name',
                                options: {}
                            },
                            {
                                prop: 'version',
                                label: '预案版本',
                                minWidth: '150',
                                slotname: 'version',
                                options: {}
                            },
                            {
                                prop: 'largeType',
                                label: '预案大类',
                                minWidth: '150',
                                slotname: 'largeType',
                                options: {}
                            },
                            {
                                prop: 'detailType',
                                label: '预案细类',
                                minWidth: '150',
                                slotname: 'detailType',
                                options: {}
                            },
                            {
                                prop: 'secretLevel',
                                label: '预案密级',
                                minWidth: '150',
                                slotname: 'secretLevel',
                                options: {}
                            },
                            {
                                prop: 'releaseTime',
                                label: '发布时间',
                                minWidth: '150',
                                slotname: 'releaseTime',
                                options: {}
                            },
                            {
                                prop: 'releaseUnit',
                                label: '发布单位名称',
                                minWidth: '150',
                                slotname: 'releaseUnit',
                                options: {}
                            },
                            {
                                prop: 'suitTypeSmall',
                                label: '适用业务分类',
                                minWidth: '150',
                                slotname: 'suitTypeSmall',
                                options: {}
                            },
                            {
                                prop: 'areaCode',
                                label: '所属区域',
                                minWidth: '150',
                                slotname: 'areaCode',
                                options: {}
                            },
                            {
                              prop: 'examineStatus',
                              label: '审核状态',
                              minWidth: '150',
                              slotname: 'examineStatus',
                              options: {}
                            },
                            {
                              prop: 'updateTime',
                              label: '审核时间',
                              minWidth: '150',
                              slotname: 'updateTime',
                              options: {}
                            },
                    {
                        prop: 'operation',
                        label: '操作',
                        width: '200',
                        align: 'center',
                        slotname: 'operation',
                        overflow: false,
                        fixed: 'right'
                    }
                ],
                tableData:[],
                selection: [],
                loading:false,
                total:1,
                pageNum:1,
                pageSize:10,
                detailOpenType:"add",
                detailDialogShow:false,
                detailId:"",
                detailTitle:"新增",
                dict:{},
                searchData:{
                  form:{
                        name:'',
                        drawUnit:'',
                        filingsStatus:'',
                        areaCode:'',
                        examineStatus:'',
                },
                   options:[
                             {
                                 title:'预案名称',
                                 key: "name",
                                 type: "text",
                             },
                             {
                                 title:'编制单位',
                                 key: "drawUnit",
                                 type: "text",
                             },
                             // {
                             //   title:'所属区域',
                             //   key: "areaCode",
                             //   type: "text",
                             // },
                             // {
                             //     title:'备案状态',
                             //     key: "filingsStatus",
                             //     type: "select",
                             //     multiple:false,
                             //     option: {
                             //         data: this.filingsStatusOptions,
                             //         props: {
                             //             key: "id", // 指定key对应data的字段
                             //             label: "label", // 指定label对应data的字段
                             //             value: "value", // 指定value对应data的字段
                             //         },
                             //     },
                             // },
                            // {
                            //   title:'审核状态',
                            //   key: "examineStatus",
                            //   type: "select",
                            //   multiple:false,
                            //   option: {
                            //     data: this.examineStatusOptions,
                            //     props: {
                            //       key: "id", // 指定key对应data的字段
                            //       label: "label", // 指定label对应data的字段
                            //       value: "value", // 指定value对应data的字段
                            //     },
                            //   },
                            // },
                   ]
                },
                buttonList:[
                    {name:'新增',methods:'handleAdd',type:'primary', hasPremission:["riskPlan:add"]},
                    // {name:'导入',methods:'handleImport'},
                    {name:'导出数据',methods:'handleExport',type:"primary", hasPremission:["riskPlan:export"]}
                ],
                isExamine:false,
                tableMainHeight: 0,
                // largeType:-1,
                largeType:"01",
                largeTypeLeftOption:[],
                // 字典
                largeTypeOptions:[],
                secretLevelOptions:[],
                planLevelOptions:[],
                planFlagOptions:[],
                versionFlagOptions:[],
                filingsStatusOptions:[],
                examineStatusOptions:[],
                riskPlanSuitTypeOptions:[],
                riskPlanSuitTypeOptionsFormat:[]
            }
        },
        watch: {
            // 字典
                  'riskPlanSuitTypeOptions':{
                    handler(newVal, oldVal) {
                      console.log("newVal=======>",newVal)
                      if(newVal){
                        this.riskPlanSuitTypeOptionsFormat = newVal.map(t=>{
                          let name = JSON.parse(t.name)
                          let item = {  label: t.label, value: name.value }
                          if(undefined!= name.children){
                             item.children = name.children
                          }
                          return item
                        })
                      }
                    },
                    deep: true,
                    immediate: true
                  },
                    'filingsStatusOptions':{
                        handler(newVal, oldVal) {
                            this.searchData.options.forEach(t=>{
                                if(t.key=='filingsStatus'){
                                t.option.data = newVal
                            }
                        })
                        },
                        deep: true,
                        immediate: true
                    },
                    'examineStatusOptions':{
                        handler(newVal, oldVal) {
                            this.searchData.options.forEach(t=>{
                                if(t.key=='examineStatus'){
                                  t.option.data = newVal
                            }
                        })
                        },
                        deep: true,
                        immediate: true
                    },
        },
        methods:{
            getSuitTypeSmallFormat(suitTypeSmall){
              if(suitTypeSmall){
                let type = suitTypeSmall.split(",")
                let item  = this.riskPlanSuitTypeOptionsFormat.find(t=>t.value == type[0])
                if(type.length ==1){
                   return item.label
                }
                if(type.length ==2){
                  let type1 = item.children.find(t=> t.value == type[1])
                  if(type1!=undefined){
                    return type1.label
                  }
                }
              }
            },
            selectType(item){
              console.log("选择=====》",item)
              this.largeType = item.value
              this.search()
            },
            getCheckBoxValue(value,option){
                if(!value){
                    return
                }
                let temp = []
                let data = value.split(",")
                data.forEach(t=>{
                    let item = option.find(x=> x.value == t)
                if(item != undefined){
                    temp.push(item.label)
                }
            })
                return temp.join(",")
            },
            getDictValue(value,option){
                let item = option.find(t=> t.value == value)
                if(item!=undefined){
                    return item.label
                }
                return value
            },
            editClose(){
                this.detailDialogShow = false
            },
            editSuccess(){
                this.search()
                this.doGetLargeTypeNumList()
                this.detailDialogShow = false
            },
            search(){
                this.fetch({
                        ...this.searchData.form,
                })
            },
            fetch(params={}){
                params.pageSize = this.pageSize
                params.pageNum = this.pageNum
                params.largeType = this.largeType
                this.loading = true
                 riskPlanPage(params).then(async res=>{
                    if(res.code==200){
                        this.total = res.data.total
                        let rows = res.data.rows
                        for(let item of rows){
                          item.areaCode = await this.$commonJs.areaCodeToName(item)
                        }
                        this.tableData = res.data.rows
                    }else{
                    this.$message({
                        message: this.$t('tips.systemException'),
                        type: 'error'
                     })
                   }
                }).finally(final=>{
                    this.loading = false
               })
            },
            // 重置搜索条件
            resetSearchData(){
                this.searchData.form = {
                        name:'',
                        drawUnit:'',
                        filingsStatus:'',
                        areaCode:'',
                        examineStatus:'',
                }
            },

            // 触发按钮区域按钮方法
            clickButton(methods){
                this[methods]()
            },
            handleAdd(){
                this.detailOpenType = "add"
                this.detailTitle = "新增"
                this.detailDialogShow = true
            },
            handleEdit(row){
                this.detailId = row.id
                this.detailOpenType = "edit"
                this.detailTitle= this.isExamine ? "审核" : "编辑"
                this.detailDialogShow = true
            },
           handleDetail(row){
             this.detailId = row.id
             this.detailOpenType = "detail"
             this.detailTitle="详情"
             this.detailDialogShow = true
           },
            handleExport(){
                let params = {
                        ...this.searchData.form,
                        largeType:this.largeType
                }
                riskPlanExport(params,`风险预案_${new Date().getTime()}.xlsx`);
            },
            handleImport(){
                console.log("等待处理")
            },
            closeDialog(){
                this.detailDialogShow = false
            },

            singleDelete(row){
                this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), {
                    confirmButtonText: this.$t('common.confirm'),
                    cancelButtonText: this.$t('common.cancel'),
                    type: 'warning'
                }).then(() => {
                    this.loading = true
                    riskPlanDelete(row.id).then(res=>{
                    if(res.code==200){
                    this.$message({
                        message: this.$t('tips.deleteSuccess'),
                        type: 'success'
                    })
                    this.doGetLargeTypeNumList()
                    this.search()
                     }else{
                        this.$message({
                            message: this.$t('tips.systemException'),
                            type: 'error'
                        })
                    }
                 }).finally(final=>{
                    this.loading = false
                 })
                })
            },
            doGetLargeTypeNumList(){
              getLargeTypeNumList().then(res=>{
                if(res.code==200){
                   this.largeTypeLeftOption = res.data
                   console.log("this.largeTypeLeftOption",this.largeTypeLeftOption)
                }
              })
            }
        },
        activated(){
          let pathArray = this.$route.path.split("/")
          let type = pathArray[pathArray.length-1]
          console.log("type=======》",type)
          this.isExamine = false
          if(type!="ctrl"){
              console.log("审核列表====>")
              this.buttonList=[]
              this.isExamine = true
          }
            this.doGetLargeTypeNumList()
            this.fetch()
        },
        created(){
          console.log("created====》",this.$route.path)
            // 获取字典值
          this.largeTypeOptions = []
          this.$commonJs.filterDataDict("riskPlanLargeType",this.largeTypeOptions )
          this.secretLevelOptions = []
          this.$commonJs.filterDataDict("riskPlanSecretLevel",this.secretLevelOptions)
          this.filingsStatusOptions = []
          this.$commonJs.filterDataDict("riskPlanFilingsStatus",this.filingsStatusOptions)
          this.examineStatusOptions = [{id: -1, label: '未审核', value: -1}]
          this.$commonJs.filterDataDict("riskPlanExamineStatus",this.examineStatusOptions)
          this.riskPlanSuitTypeOptions = []
          this.$commonJs.filterDataDict("riskPlanSuitType",this.riskPlanSuitTypeOptions)
        },
        mounted(){
            this.tableMainHeight = document.getElementsByClassName('table-main')[0].clientHeight - 44 //减去顶部按钮列表的高度
          console.log("this.tableMainHeight",this.tableMainHeight)
        }
    }
</script>

<style lang="scss" scoped>

  .largeTypeBox{
    padding: 15px 10px 20px 0;
    margin: 10px 0 10px 10px;
    background: #fff;
    flex-direction: column;
    font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    height: 100%;
  }
  .largeTypeSelect{
    margin: 10px 0 10px 10px;
    padding: 5px 5px 5px 10px;
    color: white;
    background-color: RGB(64,158,255);
    border-radius: 3px;
  }
  .largeTypeNormal:hover{
    cursor: pointer;
    color: white;
    background-color: RGB(64,158,255);
    border-radius: 3px;
  }
  .largeTypeNormal{
    /*margin: 10px 0;*/
    /*padding: 5px 5px;*/
    margin: 10px 0 10px 10px;
    padding: 5px 5px 5px 10px;
    color: #606266;
  }

    .table-all {
        display: flex;
        flex-direction: column;
        height: 100%;

    .search-box {
        padding-bottom: 6px;
    }

    .table-box {
        padding-top: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;

    .table-main {
        flex: 1;
        overflow: auto;
    }

    .table-page {
        // padding-top: 10 px;
        // padding-bottom: 10 px;
    }

    ::v-deep .pagination-container {
        text-align: right;
    }

    }
    }
</style>
